<script setup>
import { ref, reactive, onMounted } from "vue";

import TextUnderColor from "@/components/TextUnderColor.vue";
const props = defineProps({
  array: Object,
});

onMounted(() => {
  console.log(props.array);
});
</script>
<template>
  <div class="lecture-card">
    <div>
      <div>
        <img
          style="
            border-radius: 20px 20px 0 0;
            width: 240px;
            height: 136px;
            object-fit: cover;
          "
          :src="array.src"
        />
      </div>
      <div class="text-left content">
        <TextUnderColor
          :beforeColor="array.color"
          :text="array.title"
        ></TextUnderColor>
        <div class="flex flex-between">
          <small>{{ array.people }}</small>
          <small>{{ array.type }}</small>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.lecture-card {
  border-radius: 20px 20px 0 0;
  background-color: #f4f7fa;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
}

.content {
  padding: 1rem;
  font-weight: 300;
}
</style>
